<!-- @Author: Yu_Bo -->
<template>
	<view class="book" :style="[pageStyle]">
		<!-- nav -->
		<c-navbar navtype='book'></c-navbar>
		<!-- background -->
		<view class="page_background_two"></view>
		<!-- main -->
		<view class="book_main">
			<view class="mian_list" v-for="(item, index) in list" :key="index">
				<view class="icon" @click="checkBtn(index)">
					<image v-if="item.show" src="@/static/images/img/chang_icon_b.png" mode=""></image>
					<image v-else src="@/static/images/img/chang_icon_a.png" mode=""></image>
				</view>
				<view class="img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view class="t_title">
						<view class="title line_one">
							{{item.goods_name}}
						</view>
						<view class="del" @click="delBtn(index)">
							<image src="@/static/images/img/del_icon.png" mode=""></image>
						</view>
					</view>
					<view class="t_sku">
						<view class="sku" @click="skuBtn(item,index)">
							{{item.condition==1?'新书':'二手'}}
							<image src="@/static/images/img/icon_bot.png" mode=""></image>
						</view>
					</view>
					<view class="t_bot">
						<view class="money">
							<text>￥</text>
							{{item.condition==1?item.new_sale_price:item.past_sale_price}}
						</view>
						<view class="input">
							<view class="btn" @click="getNum(item,1,index)">
								<image src="@/static/images/img/jian.png" mode=""></image>
							</view>
							<view class="num">
								{{item.goods_num}}
							</view>
							<view class="btn" @click="getNum(item,2,index)">
								<image src="@/static/images/img/jia.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 无数据 -->
			<c-emptydata :type="1" v-if="list.length == 0"></c-emptydata>
		</view>
		<!-- 底部按钮 -->
		<view class="book_footer" v-if="list.length">
			<view class="left" @click="allcheckBtn">
				<image v-if="allcheck" src="@/static/images/img/chang_icon_b.png" mode=""></image>
				<image v-else src="@/static/images/img/chang_icon_a.png" mode=""></image>
				全选
			</view>
			<view class="right">
				<view class="right_txt">
					<text>合计：</text>
					￥{{allmoney}}
				</view>
				<view class="btn_txt color_right page_button" @click="submitBtn">
					结算{{allnum?'('+allnum+')':''}}
				</view>
			</view>
		</view>
		<!-- sku -->
		<c-booksku ref="sku" :type="2" :safearea="false" @sub="skuSubmit"></c-booksku>
		<!--  -->
		<c-prompttwo ref="prompttwo" text="确认要删除这本书吗?" @confirm="confirmBtn"></c-prompttwo>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				allcheck: false,
				allmoney: "0.00",
				allnum: 0,
				list: [],
				btnLoading: false,
				// 
				listIndex: null,
				delIndex: null,
			}
		},
		computed: {
			pageStyle() {
				return {
					'--pagebackground': "url(" + require('@/static/images/img/home_nav_bg.png') + ")"
				}
			}
		},
		onLoad() {},
		onShow() {
			if(this.$store.state.token) {
				this.getList(1,"")
			}
		},
		methods: {
			// 获取
			getList(type,id) {
				var that = this
				var params = {}
				if(type == 2) {
					params = {
						cart_id: id
					}
				}
				if(that.btnLoading) return
				that.btnLoading = true
				that.$httpApi.cartList(params).then((res) => {
					that.btnLoading = false
					if (res.code == 1) {
						if(type == 1) {
							var arr = res.data.lists
							arr.forEach((item) => {
								item.show = false
							})
							that.list = arr
							that.allcheck = false
							that.allmoney = "0.00"
							that.allnum = 0
						}
						if(type ==2) {
							that.allmoney = res.data.total_amount || "0.00"
							that.allnum = res.data.total_num
						}
					}
				})
			},
			// 选中sku
			skuBtn(item,index) {
				this.listIndex = index
				var arr = [
					{
						type: 0,
						id: item.goods_id,
						price: item.past_sale_price,
						discount: item.past_discount,
						label: item.past_label,
						num: item.past_book_num,
					},
					{
						type: 1,
						id: item.goods_id,
						price: item.new_sale_price,
						discount: item.new_discount,
						label: item.new_label,
						num: item.new_book_num,
					}
				]
				this.$refs.sku.openSkuBtn(item.goods_name,item.condition,item.goods_num,item.cart_id,arr)
			},
			skuSubmit(index) {
				this.list[this.listIndex].condition = index
				var arr = this.list.filter(item => item.show)
				var str = arr.map((item)=>{ return item.cart_id })
				this.getList(2, str.join(","))
			},
			// 修改数量
			getNum(item,type,index) {
				var that = this
				if(that.btnLoading) return
				if(type == 1 && item.goods_num == 1) return
				if(type == 2 && item.condition == 0 && item.goods_num == item.past_book_num) {
					that.$tips.showToast('库存不足')
					return
				}
				if(type == 2 && item.condition == 1 && item.goods_num == item.new_book_num) {
					that.$tips.showToast('库存不足')
					return
				}
				that.btnLoading = true
				var params = {
					cart_id: item.cart_id,
					goods_num: type==1 ? item.goods_num-1 : item.goods_num+1
				}
				that.$httpApi.cartChange(params).then((res) => {
					that.btnLoading = false
					if (res.code == 1) {
						that.list[index].goods_num = params.goods_num
						that.$forceUpdate()
						var arr = that.list.filter(item => item.show)
						var str = arr.map((item)=>{ return item.cart_id })
						that.getList(2, str.join(","))
					}
				})
			},
			// 选择
			checkBtn(index) {
				if(this.btnLoading) return
				this.list[index].show = !this.list[index].show
				this.$forceUpdate()
				var arr = this.list.filter(item => item.show)
				if(arr.length == this.list.length) {
					this.allcheck = true
				} else {
					this.allcheck = false
				}
				var str = arr.map((item)=>{ return item.cart_id })
				this.getList(2, str.join(","))
			},
			// 全选
			allcheckBtn() {
				if(this.btnLoading) return
				this.allcheck = !this.allcheck
				this.list.forEach((item) => {
					item.show = this.allcheck
				})
				var arr = this.list.filter(item => item.show)
				var str = arr.map((item)=>{ return item.cart_id })
				this.getList(2, str.join(","))
			},
			// 删除
			delBtn(index) {
				this.delIndex = index
				this.$refs.prompttwo.openBtn()
			},
			// 删除回调
			confirmBtn() {
				var that = this
				if(that.btnLoading) return
				that.btnLoading = true
				var params = {
					cart_id: that.list[that.delIndex].cart_id,
				}
				that.$httpApi.cartDel(params).then((res) => {
					that.btnLoading = false
					if (res.code == 1) {
						that.list.splice(that.delIndex, 1)
						that.$forceUpdate()
					}
				})
			},
			// 结算
			submitBtn() {
				var arr = this.list.filter(item => item.show)
				var str = arr.map((item)=>{ return item.cart_id })
				var ids = JSON.stringify(str)
				this.$navToLogin("/pagesBook/placeorder/index?id="+ids)
			},
		},
	}
</script>

<style lang='scss' scoped>
	.book {
		width: 100%;
		
		.book_main {
			position: relative;
			z-index: 2;
			width: 100%;
			padding: 30rpx 30rpx 130rpx 30rpx;
			
			.mian_list {
				width: 100%;
				margin-bottom: 30rpx;
				padding: 30rpx 30rpx 30rpx 0;
				background: #ffffff;
				border-radius: 20rpx;
				display: flex;
				
				.icon {
					width: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					image {
						display: block;
						width: 32rpx;
						height: 32rpx;
					}
				}
				
				.img {
					width: 140rpx;
					height: 188rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.text {
					width: calc(100% - 230rpx);
					padding-left: 30rpx;
					height: 188rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.t_title {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.title {
							width: calc(100% - 50rpx);
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #222222;
						}
						
						.del {
							width: 40rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							
							image {
								display: block;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
					
					.t_sku {
						width: 100%;
						display: flex;
						
						.sku {
							height: 48rpx;
							background: #F6F6F6;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							padding: 0 16rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #222222;
							display: flex;
							align-items: center;
							justify-content: center;
							
							image {
								display: block;
								width: 20rpx;
								height: 20rpx;
								margin-left: 10rpx;
							}
						}
					}
					
					.t_bot {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.money {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 40rpx;
							color: #5A68FF;
							display: flex;
							align-items: center;
							
							text {
								padding-top: 8rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #5A68FF;
							}
						}
						
						.input {
							display: flex;
							justify-content: flex-end;
							
							.btn {
								width: 48rpx;
								height: 48rpx;
								background: #F6F6F6;
								border-radius: 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								
								image {
									display: block;
									width: 15rpx;
									height: 15rpx;
								}
							}
							
							.num {
								width: 70rpx;
								height: 48rpx;
								margin: 0 6rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #222222;
								background: #F6F6F6;
								border-radius: 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
			
			.mian_list:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	.book_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100rpx;
		padding: 30rpx 30rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #3D444D;
			display: flex;
			align-items: center;
			
			image {
				display: block;
				margin-right: 12rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			.right_txt {
				padding-right: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF3E3E;
				display: flex;
				align-items: center;
				
				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D444D;
				}
			}
			
			.btn_txt {
				width: 164rpx;
				height: 70rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>